<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Mermaid Quick Test Page</title>
  <link rel="icon" type="image/png" href="">
  <style>
    body {
      font-family: 'trebuchet ms', verdana, arial;
    }
  </style>
</head>
<body>
  <div class="mermaid">
    graph TD
      A[Christmas] -->|Get money| B(Go shopping)
      subgraph 1test["id starting with number"]
      A
      end
      style 1test fill:#F99,stroke-width:2px,stroke:#F0F
  </div>
  <div class="mermaid">
    graph TD
      A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
      subgraph test["id starting with number"]
      A.a
      end
      style test fill:#F99,stroke-width:2px,stroke:#F0F
      classDef someclass fill:#f96;
  </div>
  <div class="mermaid">
      graph TD
      9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
      style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
  </div>
  <script src="./mermaid.js"></script>
  <script>
     function showFullFirstSquad(elemName) {
       console.log('show ' + elemName);
     }
     mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
  </script>
</body>
</html>
